<template>
    <el-card>
        <el-steps style="max-width: 100%" :active="currentStepIndex">
            <el-step title="基本信息" icon="CreditCard" @click="activeStep(1)" />
            <el-step title="表单设计" icon="Document" @click="activeStep(2)" />
            <el-step title="流程设计" @click="activeStep(3)">
                <template #icon>
                    <el-icon :size="25">
                        <Icon icon="octicon:workflow-24"></Icon>
                    </el-icon>
                </template>
            </el-step>
        </el-steps>
    </el-card>
    <el-card class="content">
        <div>
            <div v-show="currentStepIndex === 1">
                <WorkflowNomal ref="workflowNomalRef" v-model="entity" />
            </div>
            <div v-show="currentStepIndex === 2">
                <WorkflowFormDesing v-model="entity.inputs" />
            </div>
            <!--这个地方一定要用v-if强制重新渲染组件不然会出问题-->
            <div v-if="currentStepIndex === 3">
                <Workflowdesign @update:modelValue="updateEntityNodes" v-model="entity.nodes" :inputs="entity.inputs" />
            </div>
        </div>
    </el-card>
    <el-card>
        <div class="tools">
            <el-button type="primary" size="large" v-show="currentStepIndex !== 1" icon="ArrowLeft"
                @click="preStep">上一步</el-button>
            <el-button type="primary" size="large" v-show="currentStepIndex !== 3" icon="ArrowRight"
                @click="nextStep">下一步</el-button>
            <el-button type="success" size="large" v-show="currentStepIndex === 3" icon="Select"
                @click="completed">提&nbsp;&nbsp;交</el-button>
        </div>
    </el-card>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { Icon } from '@iconify/vue';
import WorkflowNomal from '../create/workflow-nomal.vue';
import WorkflowFormDesing from '../create/workflow-form-design.vue';
import Workflowdesign from '../create/workflow-design.vue';
import type { WorkflowDefinition } from '@/utils/api/workflow/definition/type';
import { useRoute, useRouter } from 'vue-router';
// 导入pinia仓库
import pinia from '@/stores';
// 导入工作流小仓储
import useWorkflowStore from '@/stores/modules/workflow';
import { getAsync } from '@/utils/api/workflow/definition';
import { ElMessage } from 'element-plus';

// 获取工作流小仓储实例
const workflowStore = useWorkflowStore(pinia);

// 路由参数
const route = useRoute();
// 获取路由实例
const { push } = useRouter();

// 当前步骤索引
const currentStepIndex = ref(1);
// 当前步骤是否验证通过
const currentStepValidated = ref(false);
// 定义流程对象
const entity = ref<WorkflowDefinition>({
    id: '',
    title: '',
    version: 1,
    description: '',
    icon: '',
    color: 'rgba(255, 69, 0, 0.68)',
    group: '',
    inputs: [],
    nodes: []
});


const updateEntityNodes = (data: any) => {
    //console.log(data);
};

// 步骤验验证设置
const setValidated = (validated: boolean) => {
    currentStepValidated.value = validated;
};

// 基础组件实例
const workflowNomalRef = ref();

// 下一步
const nextStep = async () => {
    // 第一步验证
    if (currentStepIndex.value === 1 && workflowNomalRef.value) {
        if (await workflowNomalRef.value.validated()) {
            setValidated(true);
        } else {
            setValidated(false);
        }
    }
    // 跳转到下一个步骤
    if (currentStepIndex.value++ > 2) {
        currentStepIndex.value = 1;
    }
};

// 上一步
const preStep = () => {
    if (currentStepIndex.value-- <= 1) {
        currentStepIndex.value = 1;
    }
};

// 选择步骤
const activeStep = (active: number) => {
    currentStepIndex.value = active;
};

// 提交
const completed = async () => {
    if (currentStepValidated.value) {
        const en = JSON.parse(JSON.stringify(entity.value));
        await workflowStore.update(entity.value.id, entity.value.version.toString(), en);
        ElMessage.success('更新成功');
        // 路由跳转
        push('/workflow/list');
    }
};

onMounted(async () => {
    // 获取流程定义
    const workflowDefinition = await getAsync(route.params.id as string, route.query.version as string);
    entity.value = workflowDefinition;
});
</script>
<style scoped lang="scss">
.content {
    min-height: $work_flow_min_height;
}

.tools {
    margin-top: 20px;
    width: 100%;
    text-align: center;
}
</style>